<template>
  <div
    v-loading="loading"
    v-if="examineFlowList && examineFlowList.length > 0"
    class="approval-flow"
  >
    <!-- 固定 -->
    <div class="check-items">
      <div
        class="check-item"
        v-for="(item, index) in examineFlowList"
        :key="index"
      >
        <div v-if="item.examineStatus == 6" class="d-flex">
          <div class="color-02 size-14 check-item-title">
            <span>发起审批</span>
          </div>
          <div
            class="d-flex justify-content-center align-items-center check-item-cell-one"
            v-if="item.examineStatus == 6"
          >
            <img src="../../assets/img/crm/examine.png" alt="" class="one" />
            <div
              class="check-status d-flex align-items-center justify-content-center"
            >
              <i class="el-icon-check"></i>
            </div>
          </div>

          <div class="check-item-info d-flex flex-column">
            <span class="name">{{ getDetailName(item) }}</span>
            <span class="status">发起审批</span>
          </div>
        </div>

        <div v-else class="d-flex">
          <div class="color-02 size-14 check-item-title">
            <span v-if="item.examineStatus == 4">撤回审批</span>
            <span v-else>{{ index | stepName }}</span>
          </div>
          <div
            class="d-flex justify-content-center align-items-center check-item-cell"
          >
            <i class="el-icon-s-check two"></i>
            <div
              class="check-status d-flex align-items-center justify-content-center"
              :class="{
                treat: item.examineStatus == 0 || item.examineStatus == 3,
                error: item.examineStatus == 2,
              }"
            >
              <i
                :class="{
                  'el-icon-check': item.examineStatus == 1,
                  'el-icon-more':
                    item.examineStatus == 0 || item.examineStatus == 3,
                  'el-icon-close': item.examineStatus == 2,
                }"
              ></i>
            </div>
          </div>

          <div class="check-item-info d-flex flex-column name_box">
            <div @mouseleave="mouseChange(item, false, index)">
              <div
                class="name"
                @mouseenter="mouseChange(item, true, index)"
                :class="
                  item.type == 3 && item.examineStatus != 4
                    ? 'cursors-pointer'
                    : ''
                "
              >
                {{ getDetailName(item) }}
              </div>
              <transition name="lyric">
                <div
                  @mouseenter="mouseChange(item, true, index)"
                  v-if="item.type == 3 && showUsers == index"
                  class="or_list"
                >
                  (
                  <span v-for="(item2, index2) in item.userList" :key="index2">
                    <span>{{ item2.realname }}</span
                    ><span v-if="index2 != item.userList.length - 1"
                      >、</span
                    ></span
                  >
                  )
                </div>
              </transition>
            </div>

            <span
              :class="{
                status: item.examineStatus == 1,
                more: item.examineStatus == 0 || item.examineStatus == 3,
                close: item.examineStatus == 2 || item.examineStatus == 4,
              }"
              >{{ getStatusName(item.examineStatus) }}</span
            >
          </div>
        </div>

        <div class="check-item-user" v-if="item.examineStatus == 6">
          <div class="date mt-10">
            发起时间：
            <span v-if="item && item.userList">{{
              item.userList[0].examineTime
            }}</span>
            <span v-else>---</span>
          </div>
        </div>
        <!-- 或签 -->
        <div
          class="check-item-user"
          v-else-if="item.userList.length == 1 || item.type == 3"
        >
          <div v-if="item.type == 3 && item.examineStatus == 1" class="mt-33">
            <span class="user_item_name">
              {{ auditPerson(item.userList) }}
            </span>
          </div>
          <div class="rank" v-if="auditRmarks(item.userList, item.type)">
            {{ item.examineStatus == 4 ? "撤回理由：" : "审批说明："
            }}{{ auditRmarks(item.userList, item.type) }}
          </div>
          <div
            class="date mt-10"
            v-if="
              item.userList[0].examineTime &&
              (item.examineStatus == 1 ||
                item.examineStatus == 2 ||
                item.examineStatus == 4)
            "
          >
            {{ item.examineStatus == 4 ? "撤回时间：" : "审批时间："
            }}{{ item.userList[0].examineTime }}
          </div>
        </div>
        <!-- 依次审批||会签 -->
        <div
          class="check-item-user"
          v-else-if="
            (item.type == 1 || item.type == 2) && item.userList.length != 1
          "
        >
          <div v-for="(item2, index2) in item.userList" class="user_item">
            <div class="name user_item_name">{{ item2.realname }}</div>
            <div
              class="mt-10"
              :class="{
                status: item2.examineStatus == 1,
                more: item2.examineStatus == 0 || item2.examineStatus == 3,
                close: item2.examineStatus == 2,
              }"
              v-if="item.examineStatus != 1"
            >
              {{ getStatusName(item2.examineStatus) }}
            </div>
            <div class="rank mt-10" v-if="item2.remarks">
              审批说明：{{ item2.remarks }}
            </div>
            <div
              class="date mt-10"
              v-if="item2.examineStatus != 3 && item2.examineTime"
            >
              审批时间：{{ item2.examineTime }}
            </div>
          </div>
        </div>
        <!-- 依次审批 end -->
      </div>
    </div>

    <examine-handle
      :show="showExamineHandle"
      :id="id"
      :record-id="detail.recordId"
      :examine-type="examineType"
      :detail="examineInfo"
      :status="examineHandleInfo.status"
      @close="showExamineHandle = false"
      @save="examineHandleClick"
    />
  </div>
</template>
<script type="text/javascript">
import { examineRecordQueryListAPI } from "@/api/examine"; // 审批步骤

import Nzhcn from "nzh/cn";
import ExamineHandle from "./ExamineHandle"; // 审批操作理由
import CheckFlow from "./CheckFlow"; // 审批流程
import CheckStatusMixin from "@/mixins/CheckStatusMixin";
import { wayTypeObj } from "@/components/ApprovalFlow/nodeModel";

// 审核信息 config 1 固定 0 自选
export default {
  name: "ExamineInfo", // 合同审核操作
  components: {
    ExamineHandle,
    CheckFlow,
  },
  filters: {
    stepName: function (index) {
      return Nzhcn.encodeS(index) + "级审批人";
    },
  },
  mixins: [CheckStatusMixin],
  props: {
    examineType: {
      type: String,
      default: "",
    },
    // 详情
    detail: {
      type: Object,
    },
    id: [String, Number],
    // 审批流id
    // recordId: [String, Number],
    // ownerUserId: [String, Number]
  },
  data() {
    return {
      loading: false,
      examineInfo: {}, // 审核信息
      showFlowPopover: false,
      examineHandleInfo: { status: 1 }, // 1 审核通过 2 审核拒绝 4 已撤回
      showExamineHandle: false, // 审核操作
      showUsers: -1,
    };
  },
  inject: ["rootTabs"],
  computed: {
    examineFlowList() {
      return this.examineInfo.examineFlowList
        ? this.examineInfo.examineFlowList
        : [];
    },
  },
  watch: {
    detail: {
      handler(val) {
        if (val.examineRecordId) {
          this.examineInfo = {};
          this.getFlowStepList();
          if (this.$refs.checkFlow) {
            this.$refs.checkFlow.getDetail();
          }
        }
      },
      deep: true,
      immediate: true,
    },
    "rootTabs.currentName"(val) {
      if (val === "ExamineInfo") {
        this.examineInfo = {};
        this.getFlowStepList();
        if (this.$refs.checkFlow) {
            this.$refs.checkFlow.getDetail();
        }
      }
    }
  },
  mounted() {},
  methods: {
    mouseChange(item, isShow, index) {
      if (item.type == 3 && item.examineStatus != 4) {
        if (isShow) {
          this.showUsers = index;
        } else {
          this.showUsers = -1;
        }
      }
    },
    auditPerson(userList) {
      let users = userList.filter((item) => {
        return item.isAudit == 1;
      });
      return users[0].realname;
    },
    auditRmarks(userList, type) {
      if (type == 3) {
        let users = userList.filter((item) => {
          return item.isAudit == 1;
        });
        return users.length > 0 ? users[0].remarks : "";
      } else {
        return userList[0].remarks;
      }
    },
    /**
     * 详情
     */
    getFlowStepList() {
      if (!this.detail.examineRecordId) {
        return;
      }
      this.loading = true;
      examineRecordQueryListAPI({
        recordId: this.detail.examineRecordId,
        ownerUserId: this.detail.ownerUserId,
      })
        .then((res) => {
          this.loading = false;
          const resData = res.data || {};
          this.examineInfo = resData;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 撤回审核 通过 拒绝
     */
    examineHandle(status) {
      this.examineHandleInfo.status = status;
      this.showExamineHandle = true;
    },

    /**
     * 审批操作点击
     */
    examineHandleClick(data) {
      this.getFlowStepList();
      if (this.$refs.checkFlow) {
        this.$refs.checkFlow.getDetail();
      }
      this.$emit("on-handle", data);
    },

    /**
     * 获取名称
     */
    getDetailName(data) {
      if (!data.userList || data.userList.length === 0) {
        return "XX";
      } else if (data.userList.length === 1) {
        return data.userList[0].realname;
      } else if (data.examineType === 5) {
        return `${data.userList.length}人${wayTypeObj[1]}`;
      } else {
        return `${data.userList.length}人${wayTypeObj[data.type]}`;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.approval-flow {
  position: relative;
  background-color: white;
  padding: 15px;
  height: 100%;
  overflow-y: scroll;

  &__hd {
    position: relative;

    &--right {
      .xr-btn--green,
      .xr-btn--red {
        color: white;
      }
    }
  }
}

// 头部标示
.flow-title {
  font-weight: 600;
  color: #333333;
  margin-right: 20px;
  i {
    color: white;
    margin-right: 5px;
    padding: 3px;
    font-size: 12px;
    border-radius: $xr-border-radius-base;
    background-color: #1cbaf5;
  }
}

/** 审核流程 */
.check-items .check-item:last-child .check-item-user {
  border: none !important;
}
.check-items .check-item:last-child .user_item_name::after {
  background: transparent;
}

.check-item {
  margin-top: 15px;
  width: auto;
  flex-shrink: 0;
  .check-item-title {
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-weight: 500;
  }
  .check-item-cell-one {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0065f5;
    .one {
      width: 17px;
      height: 17px;
    }
  }
  .check-status {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #34c724;
    color: #fff;
    font-size: 12px;
    border: 2px solid #fff;
    right: -9px;
    bottom: -7px;
  }
  .check-item-cell {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #935af6;
    .two {
      font-size: 20px;
      color: #fff;
    }
    // 失败
    .error {
      background-color: #ec1717;
    }
    // 等待
    .treat {
      background-color: #faae1b;
    }
  }

  .check-item-info {
    margin-left: 25px;
    width: 90%;
    margin-top: -3px;
  }

  .check-item-user {
    padding-bottom: 39px;
    margin-top: 15px;
    margin: 10px 0 0 90px;
    border-left: 1px solid #dee3ff;
    // min-height: 80px;
    padding-left: 42px;
  }
}

// 固定审批流详情
.popover-detail {
  padding: 0 5px;
}
.popover-detail-item {
  padding: 5px 0;
  &-img {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin-right: 10px;
  }
  &-time {
    color: #bababa;
    font-size: 12px;
  }
  &-examine {
    .examine-name {
      color: #333;
      margin-right: 10px;
    }
    .examine-info {
      color: #666;
    }
  }
}
.name {
  color: #333;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 6px;
}
.rank {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  margin-top: 7px;
}
.date {
  color: #999;
  font-size: 12px;
}
.user_item {
  padding-top: 23px;
}
.status {
  color: #34c724;
  font-weight: 800;
}
.more {
  color: #faae1b;
  font-weight: 800;
}
.close {
  color: #ec1717;
  font-weight: 800;
}
.or_list {
  color: #999999;
  font-weight: normal !important;
  margin-top: 11px;
  margin-bottom: 7px;
}

.mt-33 {
  padding-top: 23px;
}
.name:hover + .or_list {
}
.user_item_name {
  position: relative;
  font-weight: bold;
}
.user_item_name::after {
  position: absolute;
  content: "";
  left: -31px;
  top: 5px;
  width: 23px;
  height: 1px;
  background: #dee3ff;
}
.cursors-pointer {
  cursor: pointer;
  width: 100px;
}
.lyric-enter-active {
  animation: move 0.5s;
}
.lyric-leave-active {
  animation: leaves 0.5s;
}

@keyframes move {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

@keyframes leaves {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
